<template>
    <el-dialog :visible.sync="allDialogInvoice" title="批量导入普票">
        <div class="content-upload">
            <span style="color: red">*</span>
            <span style="color: #4A4A4A">上传文件： </span>
            <el-upload
                class="upload-demo"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="onSuccess"
                :on-error="onError"
                :on-progress="onProgress"
            >
                <p class="buttonClass">
                    <span style="font-size: 50px">+</span>
                </p>
            </el-upload>
        </div>
        <div style="margin-top: 10px;color: #9B9B9B">请先下载 <a :href="downloadUrl" style="color: #0089EF;">普通导入模板</a>,
            按要求填写后上传, 每个不超过50M
        </div>
    </el-dialog>
</template>

<script>
import {addUrlPerFix} from "@/basa/utils";
import {generateUUID} from "@/basa/utils";

export default {
    name: "allInvoiceIn",
    data() {
        return {
            allDialogInvoice: false,
            downloadUrl: `${addUrlPerFix(
                process.env.VUE_APP_BASE_URL
            )}/apis/smp/invocebasic/templateDownload`,
            actionUrl: `${addUrlPerFix(process.env.VUE_APP_INVOICEINUPLOAD_URL)}`,
            fileList: [],
            uploadLoading: null,
        }
    },
    methods: {
        // 上传文件之前的钩子，参数为上传的文件
        beforeUpload({ name, size }) {
            console.log({name,size});
            let arr = [".xlsx",".xls",".xlsm"];
            const suffix = name.substring(name.lastIndexOf("."));
            let fileType = arr.includes(suffix.toLowerCase());
            const isLt50 = size <= (1024 * 1024 * 50);
            if (!isLt50) {
                this.$showErrorMessage("文件大小不超过50M!")
            }
            if (!fileType) {
                this.$showErrorMessage("上传文件格式错误！")
            }
            return fileType;
        },
        // 文件上传时的钩子
        onProgress() {
            this.uploadLoading = this.$loading({
                lock: true,
                text: "上传中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
        },
        onSuccess(response, file, fileList) {
            let {data} = response;
            let uuid = generateUUID();
            data.invoiceList.forEach(item => {
                item.id = uuid;
                if(item.invoiceDate){item.invoiceDate = item.invoiceDate.substring(0,10)};//处理时间避免保存时出错
                item.invoiceTypeName ="普票";
            });
            console.log(data.invoiceList, 'data.invoiceList');
            this.$emit("handleAllInvoice", data.invoiceList);
            if (data.invalidMsg) {
                this.$showErrorMessage(data.invalidMsg);
            }
            this.uploadLoading.close();
            this.allDialogInvoice = false;
        },
        onError({message}) {
            this.$showErrorMessage(message);
            this.uploadLoading.close();
        }
    }
}
</script>

<style scoped lang="scss">
.buttonClass {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 1px dashed #DFDFDF;
    color: #D3D3D3;
    line-height: 71px;
    margin-left: 5px;
}

.content-upload {
    display: flex;
}

.el-upload__tip {
    display: block;
}

/deep/ .el-dialog__body {
    height: 340px;
    padding-left: 143px;
    padding-top: 20px;
}
</style>